<template >
  <div class="cron-component" :val="value_">
    <el-form label-width="100px" class="cron-btn_form">
      <el-form-item label="表达式名称">
        <el-input v-model="cronName" @change="$emit('update:cronName', $event)"></el-input>
      </el-form-item>
      <el-form-item label="常用表达式">
        <el-row :gutter="10">
           <el-button
             type="primary"
             plain
             v-for="item in btnList"
             :key="item.label"
             @click="handleChangeExp(item.value)"
           >{{item.label}}</el-button>
        </el-row>
      </el-form-item>
    </el-form>
    <el-tabs class="cron-tabs"
             type="border-card"
             shadow="never"
             v-model="activeName">
        <el-tab-pane label="分钟" name="m">
          <second-and-minute v-model="mVal" lable="分钟"></second-and-minute >
        </el-tab-pane>
        <el-tab-pane label="小时" name="h">
          <hour v-model="hVal" lable="小时"></hour>
        </el-tab-pane>
        <el-tab-pane label="日" name="d">
          <day v-model="dVal" lable="日"></day>
        </el-tab-pane>
        <el-tab-pane label="月" name="month">
          <month v-model="monthVal" lable="月"></month>
        </el-tab-pane>
        <el-tab-pane label="周" name="week">
          <week v-model="weekVal" lable="周"></week>
        </el-tab-pane>
        <el-tab-pane label="年" name="year">
          <year v-model="yearVal" lable="年"></year>
        </el-tab-pane>
    </el-tabs>
    <!-- FieldSet -->
    <field-set title="表达式" titleFontSize="20px">
      <el-form label-width="100px" class="fieldset-form">
        <el-form-item label="表达式字段">
          <el-row :gutter="10">
             <el-col span="4"
                class="cron-detail_item"
                v-for="item in Object.keys(detailExp)"
                :key="item"
              >
                <span class="cron-detail_title">{{item}}</span>
                <span class="cron-detail_val">{{detailExp[item]}}</span>
              </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="Cron表达式">
          <el-row :gutter="10">
            <el-col span="21">
              <el-input v-model="inpValue"></el-input>
            </el-col>
            <el-col span="3">
              <el-button type="primary"  @click="handleParseExp">反解析</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div>
        <p>最近10次运行时间</p>
        <p v-if="errMsg">{{errMsg}}</p>
        <ul v-else class="infinite-list"  style="overflow:auto">
          <li v-for="(item) in runList" :key="item" class="infinite-list-item">{{ item }}</li>
        </ul>
      </div>
    </field-set>
  </div>
</template>

<script>
import SecondAndMinute from './secondAndMinute'
import hour from './hour'
import day from './day'
import month from './month'
import week from './week'
import year from './year'
import FieldSet from '@/components/field-set/main'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    cronName: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      activeName: 'm',
      sVal: '',
      mVal: '',
      hVal: '',
      dVal: '',
      monthVal: '',
      weekVal: '',
      yearVal: '',
      btnList: [{
        label: '每1分钟一次',
        value: "0 1 * * * ? *"
      },{
        label: '每5分钟一次',
        value: "0 5 * * * ? *"
      },{
        label: '每30分钟一次',
        value: "0 30 * * * ? *"
      },{
        label: '每天上午8点',
        value: '0 0 8 * * ? *'
      },{
        label: '每天中午12点',
        value: '0 0 12 * * ? *'
      },{
        label: '每天下午4点',
        value: '0 0 16 * * ? *'
      },],
      inpValue: '',
      runList: [],//最近10次运行时间由后端接口返回
    }
  },
  watch: {
    'value' (a, b) {
      this.inpValue = this.value;
      this.updateVal()
    }
  },
  computed: {
    detailExp () {
      return {
        // 秒: this.sVal,
        分钟: this.mVal,
        小时: this.hVal,
        日: this.dVal,
        月: this.monthVal,
        星期: this.weekVal,
        年: this.yearVal
      }
    },
    value_ () {
      if (!this.dVal && !this.weekVal) {
        return ''
      }
      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`
      if (v !== this.value) {
        this.$emit('input', v);
      }
      return v
    },
    errMsg() {
      if(!this.monthVal) return '月值必须介于1和12之间';
      if(!this.dVal) return '日值必须介于1和31之间';
      if(!this.mVal) return '分钟值必须介于0和59之间';
      if(!this.sVal) return '秒值必须介于0和59之间';
      if(!this.hVal) return '小时值必须介于0和23之间';
      if (this.dVal === '?' && this.weekVal === '?') {
        return '日期与星期不可以同时为“不指定”'
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        return '日期与星期必须有一个为“不指定”'
      }
      if(this.monthVal === '?' || this.yearVal === '?' || this.hVal === '?' || this.mVal === '?' || this.sVal === '?') {
          return '"?"只能在日和星期（周）中指定使用，其作用为不指定'
      }
      return ''
    }
  },
  methods: {
    updateVal () {
      if (!this.value) {
        return
      }
      let arrays = this.value.split(' ')
      this.sVal = arrays[0]
      this.mVal = arrays[1]
      this.hVal = arrays[2]
      this.dVal = arrays[3]
      this.monthVal = arrays[4]
      this.weekVal = arrays[5]
      this.yearVal = arrays[6]
    },
    handleParseExp() {
      this.$emit('input', this.inpValue);
    },
    handleChangeExp(val) {
      this.$emit('input', val);
    },
  },
  created () {
    console.log('value', this.value)
    this.inpValue = this.value;
    this.updateVal();
  },
  components: {
    SecondAndMinute, hour, day, month, week, year, FieldSet
  }
}
</script>

<style lang="scss">
.cron-component {
  text-align: left;
  padding: 10px;
  .cron-btn_form {
    .el-form-item {
      margin-bottom: 10px;
      .el-input {
        width: 400px;
      }
    }
  }
  .cron-tabs {
    height: 310px;
    /*border: none;*/
    box-shadow: none;
    .el-input--mini .el-input__inner {
      height: 26px;
      line-height: 26px;
    }
    .el-input-number--mini {
      line-height: 24px;
    }
    .el-radio {
      margin-right: 15px;
    }
  }
  .el-form {
      .el-button {
        padding: 8px 15px;
        height: 30px;
      }
  }
  .fieldset-form {
    .cron-detail_item {
      text-align: center;

      span {
        display: block;
        border-radius: 2px;
      }

      .cron-detail_title {
        height: 16px;
        line-height: 16px;
        background-color: #1e9fff;
        color: #fff;
      }

      .cron-detail_val {
        height: 32px;
        line-height: 32px;
        background-color: #eee;
        color: #1e9fff;
      }

    }

    .el-form-item__content {
      line-height: 30px;
      padding: 5px;
    }

    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
